<template>
    <div class="" id="facRepair">
       
        <el-row >
            <el-col :span="22" :offset="1">
                <div class="permission-content ">
                  <el-form :inline="true" ref="form" :model="formData" label-width="80px">
                   
                     <el-form-item label="设备编号">
                          <el-input v-model="formData.facCode"></el-input>
                     </el-form-item>
                     <el-form-item label="设备类型">
                      <el-select clearable v-model="formData.deviceType" placeholder="请选择">
                        <el-option
                          v-for="item in basic.selDeviceType"
                          :key="item.dict_key"
                          :label="item.dict_value"
                          :value="item.dict_key">
                        </el-option>
                      </el-select>
                     </el-form-item>
                     <el-form-item label="设备状态">
                          <el-select clearable v-model="formData.reStatus" placeholder="请选择">

                        <el-option
                          v-for="item in basic.selReStatus"
                          :key="item.dict_key"
                          :label="item.dict_value"
                          :value="item.dict_key">
                        </el-option>
                      </el-select>
                     </el-form-item>
                      <el-form-item >
                        <el-button v-preventReClick type="primary" @click="queryRepairList" style="margin-left:100px;">查询</el-button>
                      </el-form-item>
                  </el-form>
                 </div>
            </el-col>
            <el-col :span="22" :offset="1">
                <div class="permission-content bg-purple user-table">
                    <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                      prop="id"
                      label="报修单号"
                      align="center"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="facCode"
                      label="设备编号"
                      align="center"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="deviceType"
                      label="设备类型"
                      align="center"
                      width="180">
                      <template slot-scope="scope">
                        {{basic.deviceType&&basic.deviceType[scope.row.deviceType]}}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="reStatus"
                      align="center"
                      label="报修状态">
                      <template slot-scope="scope">
                        {{basic.reStatus&&basic.reStatus[scope.row.reStatus]}}
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        width="100">
                        <template slot-scope="scope">
                          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                          <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> -->
                          <el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>

                        </template>
                    </el-table-column>
                  </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="queryRepairList" />

                </div>
            </el-col>
        </el-row>
        
    </div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
import { getRepairList,delRepair} from '@/api/facility/facility'
import { mapState } from 'vuex'
import {disposeDict} from '@/utils/dicts'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
    data() {
      return{
          text:"测试",
          tableData:[],
          formData:{},
          total:0,
           listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
          basic:{
            reStatus:disposeDict('restatus','obj'),
            deviceType:disposeDict('facType','obj'),
            selDeviceType:disposeDict('facType','arr'),
            selReStatus:disposeDict('restatus','arr'),

          },
          userMessage:{},
          dialogVisible:false
      }  
    },
    created(){
     this.queryRepairList()
     this.$store.dispatch('basic/getDict').then(res=>{
    // this.basic=disposeToObj(res.data,'deviceState')
  })
    },
    mounted(){
    },
     computed:
     {
        // ...mapState(['basic'])
     },
    methods:{
      queryRepairList(){
        this.formData.listQuery=this.listQuery

        getRepairList(this.formData).then(res=>{
        this.tableData=res.data.items
        this.total=res.data.total
      })
      },
      //查看详情
      handleClick(data){
        data.edit=true
        this.$router.push({
          path:'facRe',
          name:'facRe',
          params:data
        })
      },
      //删除保修记录
       delClick(data){
       delRepair(data).then(res=>{
         this.$message({ 
          message: '删除成功',
          type: 'success'
        });
        this.queryRepairList()
       })
      },
      //关闭弹出框
      handleClose(){
        this.dialogVisible = false
      }
      
    }
}
</script>
<style lang='scss' scoped>
#facRepair{
    padding: 20px 0;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .permission-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>